<template>
	<view class="choose-area">
		<view style="background-color: #2F75FA; height: 160rpx;"></view>
				
		<view class="top d-inline-block">
			<view class="goods d-flex" style="margin-top: -90rpx;">
				<u-image width="269rpx" height="156rpx" radius="10rpx"></u-image>
				<view class="d-flex justify-space-between flex-column flex-grow-1" style="margin-left: 20rpx;">
					<view>
						<view class="name">{{ data.name }}</view>
						<view class="status">{{ data.status }}</view>
					</view>
					<view class="flex-align">
						<u-icon name="info-circle-fill" color="#2F75FA"></u-icon>
						<u-text text="场地布局图" color="#2F75FA" size="24rpx" margin="0 0 0 7rpx"></u-text>
					</view>
				</view>
			</view>
			
			<!-- 选择区域 -->
			<view class="choose-area-wrapper" >
				<view
					v-for="item in area"
					:key="item.id"
					class="item flex-between"
					:class="{ active: activeArea === item.id }"
					@click="onClickArea(item)"
				>
					<view class="flex-align">
						<view class="name bold">{{ item.name }}</view>
						<price :value="item.price" :color="item.status !== 2 ? '#ff4105' : '#999'"></price>
					</view>
					<u-tag
						:text="item.statusName"
						:bgColor="activeArea === item.id ? '#2f75fa' : '#fff'"
						:borderColor="activeArea === item.id ? 'rgba(0,0,0,0)' : '#999'"
						:color="activeArea === item.id ? '#fff' : '#999'"
						shape="circle"
						size="mini"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {
				name: 'CBA绍兴奥体',
				status: '进行中',
				price: 888,
				rest: 8
			},
			activeArea: 1,
			area: [
				{
					id: 1,
					name: '场地东侧-A区',
					price: 888,
					status: 1,
					statusName: '有座'
				},
				{
					id: 2,
					name: '场地东侧-A区',
					price: 888,
					status: 1,
					statusName: '有座'
				},
				{
					id: 3,
					name: '场地东侧-A区',
					price: 888,
					status: 2,
					statusName: '售罄'
				}
			]
		}
	},
	methods: {
		onClickArea(item) {
			if (item.status !== 2) {
				this.activeArea = item.id; 
				uni.navigateTo({
					url: '/pages/activity-seat/seat-selection/seat-selection'
				});
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.choose-area {
	.top {
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 0 30rpx 20rpx;
		margin-top: -30rpx;
		width: 100%;
		box-shadow: 0px 24rpx 57rpx 0px rgba(8, 73, 162, 0.05);
		
		.name,
		.status {
			color: #fff;
		}
	}
	
	.goods {
		.name {
			font-size: 28rpx;
		}
		
		.status {
			font-size: 24rpx;
		}
		
		.rest {
			color: #BEBEBE;
			font-size: 22rpx;
		}
	}
	
	.choose-area-wrapper {
		margin-top: 60rpx;
		
		.item {
			padding: 34rpx 18rpx 35rpx 19rpx;
			background-color: rgb(246,247,249);
			border: solid 2rpx rgb(153, 153, 153);
			border-radius: 5rpx;
			
			&:not(:first-of-type) {
				margin-top: 18rpx;
			}
			
			&.active {
				background-color: #fff;
				border-color: #2F75FA;
			}
		}
		
		.name {
			color: #333;
			font-size: 28rpx;
			margin-right: 100rpx;
		}
	}
}
</style>
